<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>

      <div class="infor-right" v-show="ctnIndex == 0">
        <div class="account">小黑屋</div>
        <div class="infor">
          <div class="infor-title">全部贴子</div>
          <div class="talk-content" v-if="res.listShow">
            <div class="talk-single" v-for="(item, index) in list" :key="index">
              <div class="talk-header">
                <div class="talk-img">
                  <img :src="item.headImage" alt="" />
                </div>
                <div class="talk-right">
                  <div class="talk-name">{{ item.nickName }}</div>
                  <div class="talk-date">{{ item.updateTime }}</div>
                </div>
              </div>
              <div class="favor-content">文章</div>
              <div class="small-content">
                <div class="reply">
                  <div class="reply-content">
                    {{ item.articleTitle }}
                  </div>
                </div>
                <div class="btns">
                  <span
                    class="reply-span"
                    @click="deleteAirticle(item.articleId)"
                    >删除</span
                  >
                  <span class="reply-editor" @click="submit(item.articleId)"
                    >重新编辑</span
                  >
                  <span class="reason">{{ item.darkRoomContent }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="talk-content noneList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
    </div>
    <div class="paging" v-if="res.listShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <nav-footer ref="child"> </nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import { provinceAndCityData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      tags: [{ name: "待审核" }],
      list: [{}, {}, {}],
      defaultIndex: 0,
      ctnIndex: 0,
      options: provinceAndCityData,
      selectedOptions: [],
      value1: "",
      res: "",
      count: 0,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    this.init(1);
  },
  methods: {
    init(page) {
      this.$fetch(
        `/laiwen/article/frontend/darkroom?page=${page}&limit=20`,
        {}
      ).then((res) => {
        this.res = res;
        this.count = res.count;
        this.list = res.list;
        this.delList(res, "list");
      });
    },
    //文章删除
    deleteAirticle(id) {
      let that = this;
      that
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .$post(`/laiwen/article/frontend/delete?articleId=${id}`, {})
            .then((res) => {
              //重置列表
              that.init(1);
            });
          that.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重发操作
    submit(e) {
      let id = e;
      let that = this;
      that.$router.push({
        path: "/editor",
        query: { id: e },
      });
    },
    handleChange(value) {
      console.log(CodeToText[value[0]]);
      console.log(CodeToText[value[1]]);
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
    },
    //分页方法
    changePage(size) {
      this.init(size);
    },
    changeDate(val) {
      console.log(this.value1);
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/black.css"></style>
